<template>
  <div class="box">
    <ul>
      <li
        v-for="(item,index) in albums"
        :key="index"
      >
        <div
          class="cover"
          :title="item.name"
          @click="goalbum(item.id)"
        >
          <img :src="item.picUrl">
          <a href="#"></a>
          <i class="iconfont icon-bofang"></i>
        </div>
        <p
          class="name"
          @click="goalbum(item.id)"
        >{{item.name}}</p>
        <p class="time">{{item.publishTime | dateFormat}}</p>
      </li>
    </ul>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="12"
      :total="200"
      :current-page="nowpage"
      prev-text="< 上一页"
      next-text="下一页 >"
      @current-change="changepage"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      artID: 0,
      albums: [],
      nowpage: 1
    }
  },
  created () {
    this.getAllAlb()
  },
  methods: {
    async getAllAlb () {
      this.artID = this.$route.query.id;
      let offst = (this.nowpage - 1) * 12;
      let res = await axios.get('https://autumnfish.cn//artist/album?id=' + this.artID + '&limit=12&offset=' + offst)
      // console.log(res)
      this.albums = res.data.hotAlbums
    },
    // 改变页数
    changepage (val) {
      this.nowpage = val;
      // console.log(this.nowpage)
      this.getAllAlb()
    },

    // 跳转到专辑详情页
    goalbum (id) {
      this.$router.push({ path: '/discover/album', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
}
ul,
li,
p {
  margin: 0;
  padding: 0;
}
ul {
  margin: 20px 0 0 -18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  li {
    list-style: none;
    width: 145px;
    height: 175px;
    .cover {
      width: 120px;
      height: 120px;
      position: relative;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
      a {
        width: 145px;
        height: 120px;
        background-image: url(../../assets/image/coverall.png);
        background-position: -170px -850px;
        position: absolute;
        top: 0;
        left: 0;
      }
      .iconfont {
        position: absolute;
        right: 5px;
        bottom: 5px;
        font-size: 27px;
        color: #747474;
        display: none;
      }
    }
    .cover:hover {
      .iconfont {
        display: inline-block;
      }
      .iconfont:hover {
        color: #fff;
      }
    }
    .name {
      cursor: pointer;
      width: 100%;
      margin: 8px 0 3px;
      font-size: 14px;
      line-height: 19px;
      max-height: 38px;
      overflow: hidden;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #000;
      font-size: 10px;
    }
    .name:hover {
      text-decoration: underline;
    }
    .time {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      color: #666;
      font-size: 12px;
    }
  }
}
</style>
